import Vue from 'vue'
import VueRouter from 'vue-router'
import store from '@/store/index'

Vue.use(VueRouter)

// 路由规则
const routes = [
  {
    path: '/login',
    name: 'login',
    component: () => import(/* webpackChunkName: "login" */'@/views/login/index')
  },
  {
    path: '/',
    redirect: '/home'
  },
  {
    path: '/home',
    name: 'home',
    component: () => import(/* webpackChunkName: "layout" */'@/views/layout/index'),
    meta: {
      requiresAuth: true,
      title: '首页'
    },
    redirect: 'courses',
    children: [
      {
        path: '/role',
        name: 'role',
        component: () => import(/* webpackChunkName: "role" */'@/views/role/index'),
        meta: {
          title: '角色列表'
        }
      },
      {
        path: '/menu',
        name: 'menu',
        component: () => import(/* webpackChunkName: "menu" */'@/views/menu/index'),
        meta: {
          title: '菜单列表'
        }
      },
      {
        path: '/resource',
        name: 'resource',
        component: () => import(/* webpackChunkName: "resource" */'@/views/resource/index'),
        meta: {
          title: '资源列表'
        }
      },
      {
        path: '/courses',
        name: 'courses',
        component: () => import(/* webpackChunkName: "courses" */'@/views/courses/index'),
        meta: {
          title: '课程管理'
        }
      },
      {
        path: '/users',
        name: 'users',
        component: () => import(/* webpackChunkName: "users" */'@/views/users/index'),
        meta: {
          title: '用户管理'
        }
      },
      {
        path: '/advertise',
        name: 'advertise',
        component: () => import(/* webpackChunkName: "advertise" */'@/views/advertise/index'),
        meta: {
          title: '广告列表'
        }
      },
      {
        path: '/advertise-space',
        name: 'advertise-space',
        component: () => import(/* webpackChunkName: "advertise-space" */'@/views/advertise-space/index'),
        meta: {
          title: '广告位列表'
        }
      },
      {
        path: '/menuDetail',
        name: 'menuDetail',
        component: () => import(/* webpackChunkName: "menuDetail" */'@/views/menu/menuDetail'),
        meta: {
          title: '新建菜单'
        }
      },
      {
        path: '/menuDetail/:id',
        name: 'menuEditDetail',
        component: () => import(/* webpackChunkName: "menuEditDetail" */'@/views/menu/menuDetail'),
        meta: {
          title: '编辑菜单'
        }
      },
      {
        path: '/resourceCategory',
        name: 'resourceCategory',
        component: () => import(/* webpackChunkName: "resourceCategory" */'@/views/resource/resourceCategory'),
        meta: {
          title: '资源分类'
        }
      },
      {
        path: '/allocMenu/:id',
        name: 'allocMenu',
        component: () => import(/* webpackChunkName: "allocMenu" */'@/views/role/allocMenu'),
        props: true,
        meta: {
          title: '分配菜单'
        }
      },
      {
        path: '/allocResource/:id',
        name: 'allocResource',
        component: () => import(/* webpackChunkName: "allocResource" */'@/views/role/allocResource'),
        props: true,
        meta: {
          title: '分配资源'
        }
      },
      {
        path: '/addAdvertise',
        name: 'addAdvertise',
        component: () => import(/* webpackChunkName: "addAdvertise" */'@/views/advertise/addAdvertise'),
        meta: {
          title: '添加广告'
        }
      },
      {
        path: '/addAdvertise/:id',
        name: 'addAdvertiseDetil',
        component: () => import(/* webpackChunkName: "addAdvertiseDetil" */'@/views/advertise/addAdvertise'),
        meta: {
          title: '编辑广告'
        }
      },
      {
        path: '/addAdvertise-space',
        name: 'addAdvertise-space',
        component: () => import(/* webpackChunkName: "addAdvertise-space" */'@/views/advertise-space/addAdvertise-space'),
        meta: {
          title: '添加广告位'
        }
      },
      {
        path: '/addAdvertise-space/:id',
        name: 'addAdvertiseSpaceDe',
        component: () => import(/* webpackChunkName: "addAdvertiseSpaceDe" */'@/views/advertise-space/addAdvertise-space'),
        meta: {
          title: '编辑广告位'
        }
      },
      {
        path: '/course/create',
        name: 'createCourse',
        component: () => import(/* webpackChunkName: "createCourse" */'@/views/courses/create'),
        meta: {
          title: '新建课程'
        }
      },
      {
        path: '/course/edit/:id',
        name: 'editCourse',
        component: () => import(/* webpackChunkName: "editCourse" */'@/views/courses/create'),
        props: true,
        meta: {
          title: '编辑课程'
        }
      },
      {
        path: '/course/sections/:courseId',
        name: 'sections',
        component: () => import(/* webpackChunkName: "sections" */'@/views/courses/sections'),
        props: true,
        meta: {
          title: '内容管理'
        }
      },
      {
        path: '/course/:courseId/video/:lessonId',
        name: 'courseVideo',
        component: () => import(/* webpackChunkName: "courseVideo" */'@/views/courses/video'),
        props: true,
        meta: {
          title: '上传视频'
        }
      }
    ]
  },
  {
    path: '/*',
    name: 'error-page',
    component: () => import(/* webpackChunkName: "error-page" */'@/views/error-page/index')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

// 路由守卫
router.beforeEach((to, from, next) => {
  // 检测路由是否需要登录
  // matched 一个路由匹配到的所有路由记录
  if (to.matched.some(record => record.meta.requiresAuth)) {
    // 检测 store 中的 user 是否存在
    if (!store.state.user) {
      // 未登录成功跳转到登录页
      next({
        name: 'login',
        // query 携带查询参数 ,确保将路由重定向到再次登录成功之前所在的路由页面
        query: { redirect: to.fullPath }
      })
    } else {
      // 登录成功,允许通过
      next()
    }
  } else {
    // 无需登录,允许通过
    next()
  }
})
export default router
